<table mat-table multiTemplateDataRows [dataSource]="investBeanList">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 股票名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef> 股票代码 </th>
    <td mat-cell *matCellDef="let element"> {{element.code}} </td>
  </ng-container>

  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef> 买入价格 </th>
    <td mat-cell *matCellDef="let element"> {{element.price | number: '1.2-2'}} </td>
  </ng-container>

  <ng-container matColumnDef="backup">
    <th mat-header-cell *matHeaderCellDef> 现价 </th>
    <td mat-cell *matCellDef="let element"> {{element.remark | number:'1.2-2'}} </td>
  </ng-container>

  <ng-container matColumnDef="increaseRate">
    <th mat-header-cell *matHeaderCellDef> 涨幅 </th>
    <td mat-cell *matCellDef="let element">
      <span *ngIf="element.backup > 0" class="red font-weight-bold">{{element.backup | number: '1.2-2'}}%</span>
      <span *ngIf="element.backup <= 0" class="green font-weight-bold">{{element.backup | number: '1.2-2'}}%</span>
    </td>
  </ng-container>

  <ng-container matColumnDef="sharesNumber">
    <th mat-header-cell *matHeaderCellDef> 持股数 </th>
    <td mat-cell *matCellDef="let element"> {{element.sharesNumber}} </td>
  </ng-container>

  <ng-container matColumnDef="amount">
    <th mat-header-cell *matHeaderCellDef> 持仓金额（元） </th>
    <td mat-cell *matCellDef="let element"> {{element.amount | number: '1.2-2'}} </td>
  </ng-container>

  <ng-container matColumnDef="profit">
    <th mat-header-cell *matHeaderCellDef> 浮动盈利（元） </th>
    <td mat-cell *matCellDef="let element">
      <span *ngIf="element.profit > 0" class="red font-weight-bold">{{element.profit | number: '1.2-2'}}</span>
      <span *ngIf="element.profit <= 0" class="green font-weight-bold">{{element.profit | number: '1.2-2'}}</span>
    </td>
  </ng-container>

  <ng-container matColumnDef="profitRate">
    <th mat-header-cell *matHeaderCellDef> 收益率 </th>
    <td mat-cell *matCellDef="let element">
      <span *ngIf="element.profit > 0" class="red font-weight-bold">{{element.profit / element.amount * 100 | number: '1.2-2'}}%</span>
      <span *ngIf="element.profit <= 0" class="green font-weight-bold">{{element.profit / element.amount * 100 | number: '1.2-2'}}%</span>
    </td>
  </ng-container>

<!--  <ng-container matColumnDef="operate">-->
<!--    <th mat-header-cell *matHeaderCellDef> 操作 </th>-->
<!--    <td mat-cell *matCellDef="let element">-->
<!--      <span (click)="sellout(element)" class="green font-weight-bold ml-2 hand">卖出</span>-->
<!--    </td>-->
<!--  </ng-container>-->

  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="dataColumns.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <table class="table table-bordered mt-3">
          <tr>
            <td>股票名称</td>
            <td>股票代码</td>
            <td>买入价格</td>
            <td>买入股数</td>
            <td>剩余股数</td>
            <td>买入时间</td>
            <td>操作</td>
          </tr>
          <tr *ngFor="let invest of element.investList">
            <td>{{invest.name}}</td>
            <td>{{invest.code}}</td>
            <td>{{invest.price}}元</td>
            <td>{{invest.sharesNumber}}</td>
            <td>{{invest.sharesNumber - invest.selloutVolume}}</td>
            <td>{{invest.buyTime | date: 'yyyy-MM-dd HH:mm'}}</td>
            <td>
              <span (click)="sellout(invest)" class="btn-outline-success font-weight-bold ml-2 hand">卖出</span>
              <span (click)="cancel(invest)" class="btn-outline-danger font-weight-bold ml-2 hand">撤销买入</span>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="dataColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: dataColumns;"
      (click)="expandedElement = (this.expandedElement === row ? null : row)"></tr>
  <tr mat-row *matRowDef="let element; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
